import Icon from "@/components/Icon";
import { Tooltip } from "antd";
import { useMemo } from "react";

interface ComponentProps {
	fullscreen: Fn;
	cancel: Fn;
	canFullscreen: boolean;
	fullScreen: boolean;
}

const ModalClose = (props: ComponentProps) => {
	const prefixCls = "basic-modal-close";

	const getClass = useMemo(() => {
		let classList = [prefixCls, `${prefixCls}--custom`];
		if (props.canFullscreen) classList.push(`${prefixCls}--can-full`);
		return classList.join(" ");
	}, [props.canFullscreen]);

	// function handleFullScreen(e: any) {
	// 	e?.stopPropagation();
	// 	e?.preventDefault();
	// 	props.fullscreen && props.fullscreen();
	// }

	return (
		<div className={getClass}>
			{/* {props.canFullscreen &&
				(props.fullScreen ? (
					<Tooltip title="还原" placement="bottom">
						<FullscreenExitOutlined role="full" onClick={handleFullScreen} />
					</Tooltip>
				) : (
					<Tooltip title="最大化" placement="bottom">
						<FullscreenOutlined role="close" onClick={handleFullScreen} />
					</Tooltip>
				))} */}
			<Tooltip title="关闭" placement="bottom">
				<Icon icon="ant-design:close-outlined" onClick={props.cancel} />
			</Tooltip>
		</div>
	);
};

export default ModalClose;
